<route lang="json5">
{
  style: {
    navigationBarTitleText: '预约登记',
    navigationBarBackgroundColor: '#FFFFFF',
  },
}
</route>

<template>
  <navbar text="预约登记" />
  <view class="scroll">
    <view class="public-page" :style="{ height: `calc(100vh - ${safeAreaInsets?.top}px - 44px)` }">
      <view class="public-background">
        <view class="public-height"></view>
        <view class="reservation">
          <wd-form ref="form" :model="models" errorType="toast">
            <wd-cell-group border>
              <wd-cell title="姓名" class="name" clearable title-width="50px">
                <view class="name-cell">
                  <wd-input
                    no-border
                    clearable
                    v-model.trim="models.name"
                    :maxlength="10"
                    type="nickname"
                    @input="onInputName"
                    @blur="onInputName"
                    placeholder="填写姓名"
                  />
                  <wd-button type="text" class="button" @click="enterInformation">
                    录入用户信息
                  </wd-button>
                </view>
              </wd-cell>

              <wd-picker
                label="性别"
                clearable
                label-key="value"
                value-key="key"
                label-width="100rpx"
                placeholder="选择性别"
                v-model="models.gender"
                :columns="genderGroup"
              />

              <wd-cell title="年龄" title-width="50px">
                <view class="input-number">
                  <uv-input
                    placeholder="输入年龄"
                    border="none"
                    type="digit"
                    clearable
                    :maxlength="5"
                    v-model.trim="models.age"
                  ></uv-input>
                  <text>岁</text>
                </view>
              </wd-cell>
              <wd-cell title="身高" title-width="50px">
                <view class="input-number">
                  <uv-input
                    placeholder="输入身高"
                    border="none"
                    type="digit"
                    clearable
                    :maxlength="6"
                    v-model.trim="models.height"
                  ></uv-input>
                  <text>CM</text>
                </view>
              </wd-cell>
              <wd-cell title="体重" title-width="50px">
                <view class="input-number">
                  <uv-input
                    placeholder="输入体重"
                    border="none"
                    type="digit"
                    clearable
                    :maxlength="6"
                    v-model.trim="models.weight"
                  ></uv-input>
                  <text>KG</text>
                </view>
              </wd-cell>
              <wd-picker
                label="戴机时长"
                clearable
                label-key="value"
                value-key="key"
                label-width="130rpx"
                placeholder="选择戴机时长"
                v-model="models.recordDays"
                :columns="durationGroup"
              />
            </wd-cell-group>
            <view class="footer">
              <uv-button shape="circle" type="primary" size="large" @click="handleSubmit" block>
                提交
              </uv-button>
            </view>
          </wd-form>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="js" setup>
import navbar from '@/components/navbar'
import { genderGroup, durationGroup } from '@/utils/params'
import { isLoginEd, getUser, Re_login } from '@/utils/publicMethods'
import { getUserInfo, registerData, getExamStatus } from '@/service/index/default'
const { safeAreaInsets } = uni.getWindowInfo()
const models = ref({
  name: '',
  gender: '',
  age: '',
  height: '',
  weight: '',
  recordDays: 1,
})

const userInfo_ = ref({})
const isLogin = ref(false)
onShow(() => {
  isLogin.value = isLoginEd()
  if (!isLogin.value) {
    models.value.age = ''
    models.value.gender = ''
    models.value.height = ''
    models.value.weight = ''
    models.value.recordDays = ''
    userInfo_.value = {}
    return
  }
  userInfo_.value = getUser()
})

// 提交登记信息
const registerData_ = async () => {
  models.value.age = models.value.age || 0
  const { data, code, error } = await registerData({
    userId: userInfo_.value.userId,
    ...models.value,
  })
  if (code !== 200) {
    uni.showToast({
      title: `${error}`,
      icon: 'none',
    })
    uni.$emit('register', { status: true, name: models.value.name })
    return
  }

  uni.$emit('register', { status: true, name: models.value.name })
  setTimeout(() => {
    uni.navigateBack({ delta: 1 })
  }, 500)
}

const form = ref(null)
const handleSubmit = () => {
  form.value.validate().then(({ valid, errors }) => {
    if (!userInfo_.value?.userId) {
      Re_login()
      return
    }
    if (!models.value?.name) {
      models.value.name = userInfo_.value.phoneNumber.slice(-4) + '尾号用户'
    }
    registerData_()
  })
}

const onInputName = (e) => {
  models.value.name = e.value
}

// 录入用户信息
const enterInformation = async () => {
  const { data, code, error } = await getUserInfo({ userId: userInfo_.value.userId })
  if (code !== 200) {
    uni.showToast({
      title: `${error}`,
      icon: 'none',
    })
  }
  models.value = data
  models.value.age = data.age || ''
  models.value.gender = data.gender || ''
  models.value.weight = data.weight || ''
  models.value.height = data.height || ''
  models.value.recordDays = data.recordDays || 1
  models.value.name = data.name || userInfo_.value.phoneNumber.slice(-4) + '尾号用户'
}
</script>

<style lang="scss" scoped>
.reservation {
  padding: 30rpx 40rpx 40rpx 40rpx;
  background: #ffffff;
  border-radius: 20rpx;
  :deep(.wd-cell__wrapper) {
    display: flex;
    align-items: center;
  }
  :deep(.uni-input-wrapper) {
    text-align: left;
  }
  :deep(.wd-picker__body) {
    text-align: left;
  }
  :deep(.wd-picker__cell) {
    padding: 30rpx 0;
  }
  :deep(.wd-cell__wrapper) {
    padding: 30rpx 0;
  }
  :deep(.wd-cell) {
    padding: 0;
  }
  :deep(.wd-button) {
    padding: 0 20rpx !important;
  }
  .name-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .input-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .footer {
    padding: 12px 0;
    margin-top: 30rpx;
  }
}
</style>
